<template>
  <div class="addAddressWrapper">
    <group>
      <x-input placeholder="联系人" type="text" :value="linkname" @Input="linknameChange"></x-inpu>
    </group>
    <group>
      <x-input placeholder="联系电话" type="tel" :value="linkmobile" @Input="linkmobileChange"></x-inpu>
    </group>
    <group>
      <cell title="请选择送餐大楼" :value="building" is-link :link="{path: '/selectBuilding'}"></cell>
    </group>
     <group>
      <popup-picker title="请选择公司楼层" :data="list" :value="floorNo" @on-show="onShow" @on-hide="onHide" @on-shadow-change="onChange">
      </popup-picker>
    </group>
    <group>
      <x-input placeholder="详细地址" type="text" :value="detail" @Input="detailChange"></x-input>
    </group>
    <div class="tips">
      <p>详细地址拒绝有：后面，旁边，对面，附近等信息，如果有疑问请联系客服：4006059144</p>
    </div>
    <box class="bottom-wrapper">
      <x-button type="warn" class="addBtn" @click="saveAddress">保存地址</x-button>
      <x-button type="warn" v-show="!isNewAddress" @click="delAddress">删除地址</x-button>
    </box>
  </div>
</template>
<script>
  import { mapGetters, mapActions } from 'vuex'
  import { linkname, linkmobile, building, builderId, floorNo, detail, isNewAddress, address } from './../../vuex/getters.js'
  import { update_linkname, update_linkmobile, update_building,
           update_builderId, update_floorNo, update_detail,
           update_address, update_all_to_empty } from './../../vuex/actions.js'
  import { Group, XInput, PopupPicker, Cell, XButton, Box } from './../../components'
  var MyRequest = require('./../../commons/js/MyRequest.js')
  var Global = require("./../../commons/js/Global.js")
  var LocalStorageUtil = require('./../../commons/js/LocalStorageUtil.js')

  export default {
    components: {
      Group,
      XInput,
      PopupPicker,
      Cell,
      XButton,
      Box
    },
    vuex: {
      getters: {
        linkname,
        linkmobile,
        building,
        builderId,
        floorNo,
        detail,
        isNewAddress,
        address
      },
      actions: {
        update_linkname,
        update_linkmobile,
        update_building,
        update_builderId,
        update_floorNo,
        update_detail,
        update_address,
        update_all_to_empty
      }
    },
    data () {
      return {
        list: Global.getFloorData(),
        userInfo: LocalStorageUtil.getItem("User")
      }
    },
    created: function() {
      Global.closeLoading()
    },
    methods: {
      onChange (val) {
        this.update_floorNo(val)
        console.log(this.floorNo)
      },
      onShow () {},
      onHide (type) {},
      linknameChange (e) {
        this.update_linkname(e.target.value)
      },
      linkmobileChange (e) {
        this.update_linkmobile(e.target.value)
      },
      detailChange (e) {
        this.update_detail(e.target.value)
      },
      saveAddress () {
        if(!this.linkname || !this.linkmobile || !this.builderId) {
          Global.showToast("请确保信息填写完整", this)
          return
        }
        console.log(this.floorNo[0])
        var data = {
          accountId: this.userInfo.id,
          consignee: this.linkname,
          builderId: this.builderId,
          detail: this.detail,
          phone: this.linkmobile,
          floorNo: this.floorNo[0]
        }
        console.log(data)
        if(this.isNewAddress) {
          data.action = 'add'
          MyRequest.MyGetWithToast("ConsigneeAdd", this, this.addBack, data)
        } else {
          data.action = 'update'
          data.id = this.address.id
          MyRequest.MyGetWithToast("ConsigneeUpdate", this, this.updateBack, data)
        }
      },
      delAddress () {
        var data = {
          action: 'delete',
          accountId: this.userInfo.id,
          consignee: this.linkname,
          builderId: this.builderId,
          detail: this.detail,
          phone: this.linkmobile,
          floorNo: this.floorNo[0],
          id: this.address.id
        }
        MyRequest.MyGetWithToast("ConsigneeDelete", this, this.delBack, data)
      },
      addBack (result, that) {
        console.log(result)
        if(result.success) {
          //置空
          Global.showToast("添加成功", this)
          Global.closeLoading()
          history.go(-1)
        } else {
          Global.showToast("添加失败", this)
          Global.closeLoading()
        }
      },
      updateBack (result, that) {
        if(result.success) {
          //置空
          Global.showToast("修改成功", this)
          Global.closeLoading()
          history.go(-1)
        } else {
          Global.showToast("修改失败", this)
          Global.closeLoading()
        }
      },
      delBack (result, that) {
        if(result.success) {
          //置空
          Global.showToast("删除成功", this)
          Global.closeLoading()
          history.go(-1)
        } else {
          Global.showToast("删除失败", this)
          Global.closeLoading()
        }
      }
    }
  }
</script>
<style>
.addAddressWrapper {
  height: 100%;
  background-color: #f2f2f2;
  font-family: "Microsoft Yahei";
}
.addAddressWrapper .weui_input {
  font-size: 1.4rem;
  font-family: "Microsoft Yahei";
}
.addAddressWrapper .weui_cells {
  margin-top: 0;
}
.addAddressWrapper .weui_cells:before {
    border-top: 0px solid #D9D9D9;
}
.addAddressWrapper .weui_cell_ft {
  font-size: 1.4rem;
  font-family: "Microsoft Yahei";
}
.addAddressWrapper .weui_cell_bd p {
  color: #000;
  font-size: 1.4rem;
  font-family: "Microsoft Yahei";
}
.addAddressWrapper .tips {
  color: #d70602;
  font-family: "Microsoft Yahei";
  padding: 10px;
  font-size: 1.4rem;
}
.addAddressWrapper .weui_btn {
  font-family: "Microsoft Yahei";
  font-size: 1.4rem;
}
.addAddressWrapper .bottom-wrapper {
  padding: 2rem 2rem 1rem 2rem;
}
.addAddressWrapper .addBtn {
  background: orange;
}
</style>
